<template>
	<div class="search">
		<header id="header" class="mui-bar-nav">
			<div>
				<input type="text" placeholder="请输入新房/二手房的名称或地址"/>
				<span class="mui-icon mui-icon-search searchico"></span>
			</div>
			<i v-on:click="back" >取消</i>
		</header>
		<div class="searchList">
			<ul class="mui-table-view ulList">
				<li class="mui-table-view-cell mui-media" v-for="(item,i) in listHouse" :data-id=item.houseId :data-type=item.houseType :data-rank=i+1>
					<a href="javascript:;"  v-if="!flag">
						<div class="mui-media-body searchListNo">
							{{item.houseName}}
							<span class="houseType" v-if="item.houseType=='new'">新房</span>
							<span class="houseType" v-if="item.houseType=='xiaoQu'">二手房</span>
							<p class="mui-ellipsis" v-if="false">{{item.houseAddress}}</p>
							<p class="mui-ellipsis star" style="margin-top:3px;margin-bottom:0;color:#666" v-if="item.bfb_score">
								<img v-for="item in hasStar(item.bfb_score)" :src=item alt="" style="height: 12px;"/>
								<span class='score'>{{item.bfb_score}}分</span>　<span style='float:right;margin-right:7px;color:#e51c23;' v-if="item.housePrice">{{item.housePrice}}元</span></p>
							<p class="mui-ellipsis star" style="margin-top:3px;margin-bottom:0;color:#666" v-if="!item.bfb_score">
								<span style='margin-right:7px;color:#e51c23;'>暂无性价比</span>
							</p>
						</div>
					</a>
					<div class='houseId' :houseId=item.houseId  v-if="flag">
						<img class="mui-media-object mui-pull-left" style="" :src=item.houseImg>
						<!--<img class="mui-media-object mui-pull-left" style="" src="static/images/none.jpg">-->
						<div class="mui-media-body" style='font-size:15px;'>
							{{item.houseName}}
							<span style='float:right;margin-right:10px;color:#e51c23;' class="ranking" v-if="item.houseType=='new'">新房</span>
							<span style='float:right;margin-right:10px;color:#e51c23;' class="ranking" v-else="">二手房</span>
							<p class="mui-ellipsis" style="margin-top:3px;margin-bottom:0;color:#666;">{{item.houseAddress}}</p>
							<p class="mui-ellipsis star" style="margin-top:3px;margin-bottom:0;color:#666" v-if="item.bfb_score">
								<img v-for="item in hasStar(item.bfb_score)" :src=item alt="" style="height: 14px;"/>
								<span class='score'>{{item.bfb_score}}分</span>　<span style='float:right;margin-right:7px;color:#e51c23;' v-if="item.housePrice">{{item.housePrice}}元</span></p>
							<p class="mui-ellipsis star" style="margin-top:3px;margin-bottom:0;color:#666" v-if="!item.bfb_score">
								<span style='float:right;margin-right:7px;color:#e51c23;'>待定</span>
							</p>
							<p class="mui-ellipsis" style="margin-top:0px;margin-bottom:0;" v-if="item.houseType=='new'">
								<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;" v-if="item.houseLabel" v-for="list in item.houseLabel">{{list}}</span>
							</p>
							<p class="mui-ellipsis" style="margin-top:0px;margin-bottom:0;" v-if="item.houseType=='xiaoQu'">
								<!--<span style="line-height:20px;color:#0186c2;margin:1px;padding:2px 4px;font-size:12px;">房源(60套)</span>-->
								<span style="line-height:20px;margin:1px;padding:2px 4px;font-size:12px;">2011年建造</span>
							</p>
						</div>
					</div>
				</li>
				<!--<li class="mui-table-view-cell mui-media" v-if="listFlag">
					<a href="javascript:;">
						<div class="mui-media-body">
							暂无数据
							<p class="mui-ellipsis">{{item.houseAddress}}</p>
						</div>
					</a>
				</li>-->
			</ul>
		</div>
		<div class="mui-bar tab">
			<img src="static/images/fire-button.png" alt="" />
			<div>
				最近热搜
			</div>
		</div>
		<div class="hotHouse">
			<a href="javascript:0;" v-for="(item,i) in hotLists" v-bind:key="i" @click="goNewDetail(item.fireNewHouseId,'new')">{{item.fireNewHouseName}}</a>
		</div>
		<div class="mui-bar tab">
			<img src="static/images/search-button.png" alt="" />
			<div>
				搜索历史
				<span @click="allDel" class="mui-icon mui-icon-trash" style="float: right;color: #999;"></span>
			</div>
		</div>
		<ul class="history">
			<li v-for="(item, i) in historys"><span>{{item}}</span><i @click="del(i)">删除</i></li>
		</ul>
	</div>
</template>
<script type="text/javascript">
	export default {
		data() {
			return {
				title:'搜索',
				hotLists:[],
				historys:[],
				listHouse:[],
				listFlag:false,
				city:'',
				flag:false
			}
		},
		mounted:function(){
			var that = this;
			let ajaxURL=localStorage.getItem("ajaxURL");
			if(!localStorage.getItem('history')){
				localStorage.setItem('history','[]');
			}
			that.historys = JSON.parse(localStorage.getItem('history'));
			that.city = JSON.parse(localStorage.getItem('city'));
			let hotList = JSON.parse(sessionStorage.getItem('fireNewHouse'));
//			console.log(hotList)
			for(var i=0;i<5;i++){
				this.hotLists.push(hotList[i])
			}
			$('.mui-bar-nav input').focus(function(){
				$('.searchList').show();
			})
			$('.searchico').click(function(){
				that.flag=true;
				var input0 = $(this).siblings('input').val()
				that.historys.unshift(input0)
				localStorage.setItem('history',JSON.stringify(that.historys));
				$.ajax({
					type:"get",
					url:`${ajaxURL}/houseweb/H5/allHouseListSearch.do`,
					data:{
						city:that.city,
						keyWord:input0
					},
					cache: false,
					success:function(res){
						var data = JSON.parse(res)
						if(that.listHouse.length==0){
							that.listFlag=true;
						}else {
							that.listFlag=false;
						}
					}
				});
			})
			//keyup的兼容性处理
			var bind_name = 'input';
			if (navigator.userAgent.indexOf("MSIE") != -1) {
			 bind_name = 'propertychange';
			}//（此处是为了兼容IE）
			if(navigator.userAgent.match(/android/i) == "android")
			{
			 bind_name = "keyup";
			}
			
			$('.mui-bar-nav input').on(bind_name, function() {
				that.flag=false;
				var myReg = /^[\u4e00-\u9fa5]+$/;
				var input0 = $(this).val()
				if(input0==''){
					that.listHouse=[];
					that.listFlag=true;
				}
				if(myReg.test(input0)){
					if(input0!=''){
						console.log(that.historys)
						
						$.ajax({
							type:"get",
							url:`${ajaxURL}/houseweb/H5/allHouseListSearch.do`,
							data:{
								city:that.city,
								keyWord:input0
							},
							success:function(res){
								var data = JSON.parse(res)
								that.listHouse=[];
								for(var i = 0; i < data.data.keyWordSearch.length; i++) {
									var arr=[];
									if(data.data.keyWordSearch[i].houseLabel==null){
										arr=[];
									}else{
										for(var j=0;j<data.data.keyWordSearch[i].houseLabel.split(',').length;j++){
											if(j<4){
												arr.push(data.data.keyWordSearch[i].houseLabel.split(',')[j]);
											}
										}
									}
									data.data.keyWordSearch[i].houseLabel=arr;
									data.data.keyWordSearch[i].bfb_score=data.data.keyWordSearch[i].bfb_score.toFixed(2);
									that.listHouse.push(data.data.keyWordSearch[i]);
								}
								if(that.listHouse.length==0){
									that.listFlag=true;
								}else {
									that.listFlag=false;
								}
							}
						});
					}
				}
				
			})
			$('.ulList').on('click','li',function(){
				that.comeXiangqing($(this).attr('data-id'),$(this).attr('data-type'),$(this).attr('data-rank'))
			})
			
			$('.history').on('click','li span',function(){
				$('#header input').val($(this).html()).focus();
				$.ajax({
					type:"get",
					url:`${ajaxURL}/houseweb/H5/allHouseListSearch.do`,
					data:{
						city:that.city,
						keyWord:$('#header input').val()
					},
					success:function(res){
						var data = JSON.parse(res)
						for(var i = 0; i < data.data.keyWordSearch.length; i++) {
							var arr=[];
							if(data.data.keyWordSearch[i].houseLabel==null){
								arr=[];
							}else{
								for(var j=0;j<data.data.keyWordSearch[i].houseLabel.split(',').length;j++){
									if(j<4){
										arr.push(data.data.keyWordSearch[i].houseLabel.split(',')[j]);
									}
								}
							}
							data.data.keyWordSearch[i].houseLabel=arr;
							data.data.keyWordSearch[i].bfb_score=(parseFloat(data.data.keyWordSearch[i].bfb_score)).toFixed(2);
							that.listHouse.push(data.data.keyWordSearch[i]);
						}
						if(that.listHouse.length==0){
							that.listFlag=true;
						}
					}
				});
			})
			$('.history').on('click','li i',function(event){
				console.log(111111)
				
			})
		},
		methods:{
			comeXiangqing: function(id,type,rank) {
				this.$router.push({
					path: '/morexiangqing',
					name: 'morexiangqing',
					query: {
						id: id,
						type: type,
						ranking:0
					}
				});
			},
			 back(){
		        this.$router.go(-1);//返回上一层
		    },
		    del(index){
		    	this.historys.splice(index,1);
		    	var arr = JSON.parse(localStorage.getItem('history'));
		    	arr.splice(index,1);
				localStorage.setItem('history',JSON.stringify(arr));
		    },
		    allDel:function(){
		    	this.historys=[];
		    	localStorage.setItem('history',JSON.stringify([]));
		    },
			goNewDetail: function(id, houseType) {
				console.log(houseType)
				this.$router.push({
					path: '/morexiangqing',
					name: 'morexiangqing',
					query: {
						id: id,
						type: houseType
					}
				});
			},
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore / 20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str!=5){
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) < 5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
		}
	}
</script>
<style scoped>
	.search {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
		padding-top: 50px;
	}
	.mui-bar-nav {
		position: fixed;
		top: 0;
		width: 100%;
		height: 50px;
		padding: 10px 15px;
		z-index: 999;
		background-color: #0186c2;
	}
	.mui-bar-nav div {
		float: left;
		position: relative;
		width: 86%;
	}
	.mui-bar-nav input {
		width: 100%;
		height: 32px;
		font-size: 13px;
		color: #999;
		border: 0;
		padding-left: 8px;
	}
	.mui-bar-nav .searchico {
		position: absolute;
		right: 5px;
		top: 5px;
		font-size: 22px;
	}
	.mui-bar-nav i {
		float: right;
		font-style: normal;
		font-size: 15px;
		color: #fff;
		line-height: 32px;
	}
	.mui-bar {
		position: relative;
	}
	.searchList {
		display: none;
		position: fixed;
		z-index: 99;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: #fff;
	}
	.searchList ul{
		margin-bottom: 50px;
	}
	
	.tab {
		height: 40px;
		line-height: 40px;
		box-shadow: none;
	}
	.tab img {
		float: left;
		width: 20px;
		margin-top: 8px;
		/*line-height: 40px;*/
	}
	.tab div {
		float: left;
		font-size: 13px;
		color: #999;
		margin-left: 5px;
		width: 90%;
	}
	.hotHouse {
		position: relative;
		padding: 15px;
	}
	.hotHouse a {
	    display: inline-block;
	    margin: 0px 4px 8px 4px;
	    /* float: left; */
	    color: #666;
	    height: 30px;
	    font-size: 13px;
	    line-height: 14px;
	    padding: 8px 14px;
	    border: 1px solid #c6c6c6;
	    border-radius: 4px;
	}
	.history {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.history li {
		line-height: 36px;
		font-size: 13px;
		padding: 0 15px;
		color: #666;
		border-bottom: 1px solid #c6c6c6;
	}
	.history li span {
		/*float: left;*/
		display: inline-block;
		width: 80%;
	}
	.history li i {
		float: right;
		width: 18%;
		text-align: right;
		color: #999;
		font-style: normal;
	}
	.mui-table-view .mui-media-object {
		line-height: 90px;
		width: 130px;
		height: 90px;
	}
	.searchListNo .houseType {
		font-size: 12px;
		float: right;
		margin-right: 5px;
		color: #999;
	}
</style>